{extend name="admin@index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" method="post" lay-filter="layui-form">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">网址规则</li>
                    <li>内容规则</li>
                    <li>高级配置</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <fieldset class="layui-elem-field">
                            <legend>基本信息</legend>
                            <div class="layui-field-box">
                                <div class="layui-form-item">
                                    <label>采集任务名</label>
                                    <div>
                                        <input type="text" name="data[name]" required lay-verify="required" placeholder="采集任务名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label>页面编码</label>
                                    <div>
                                        <input type="radio" name="data[sourcecharset]" value="utf-8" title="utf-8" checked>
                                        <input type="radio" name="data[sourcecharset]" value="auto" title="自动(会删除HEAD头部)">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="layui-elem-field">
                            <legend>起始页网址</legend>
                            <div class="layui-field-box">
                                <div class="layui-form-item">
                                    <label>网址类型</label>
                                    <div>
                                        <input type="radio" name="data[sourcetype]" lay-filter="urlType" value="1" title="序列网址" checked>
                                        <input type="radio" name="data[sourcetype]" lay-filter="urlType" value="2" title="多个网页">
                                    </div>
                                </div>
                                <div class="url_type">
                                    <div class="layui-form-item">
                                        <label>采集网址</label>
                                        <div>
                                            <input type="text" name="urlpage1" placeholder="采集网址" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-form-mid layui-word-aux">(如：http://bbs.yzncms.com/?index-(*).htm,页码使用(*)做为通配符。</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div>
                                            <div class="layui-form-mid">页码从</div>
                                            <div class="layui-input-inline" style="width:60px;">
                                                <input type="text" class="layui-input" name="data[pagesize_start]" placeholder="开始页" value="1">
                                            </div>
                                            <div class="layui-form-mid">至</div>
                                            <div class="layui-input-inline" style="width:60px;">
                                                <input type="text" class="layui-input" name="data[pagesize_end]" placeholder="结束页" value="10">
                                            </div>
                                            <div class="layui-form-mid">页，每次增加</div>
                                            <div class="layui-input-inline" style="width:60px;">
                                                <input type="text" class="layui-input" name="data[par_num]" placeholder="加 ? 页" value="1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text url_type2" style="display:none;">
                                    <label>采集网址</label>
                                    <div>
                                        <textarea name="urlpage2" placeholder="采集网址" class="layui-textarea"></textarea>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">每行一条网址</div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="layui-elem-field">
                            <legend>内容页网址</legend>
                            <div class="layui-field-box">
								<div class="layui-form-item">
								    <div class="layui-input-inline" style="width:150px;"><input type="text" class="layui-input" name="data[url_rule1]" placeholder="选择器" value=""> </div>
								    <div class="layui-input-inline" style="width:60px;"><input type="text" class="layui-input" name="data[url_rule2]" placeholder="属性" value=""> </div>
								    <div class="layui-input-inline" style="width:140px;"><input type="text" class="layui-input" name="data[url_rule3]" placeholder="内容过滤器" value=""> </div>
								</div>
                                <div class="layui-form-item">
                                    <div>
                                        <div class="layui-form-mid">网址中必须包含</div>
                                        <div class="layui-input-inline" style="width:150px;">
                                            <input type="text" class="layui-input" name="data[url_contain]" value="">
                                        </div>
                                        <div class="layui-form-mid">网址中不得包含</div>
                                        <div class="layui-input-inline" style="width:150px;">
                                            <input type="text" class="layui-input" name="data[url_except]" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <div class="layui-form-item">
                            <div>
                                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div id="caijiBox"></div>
                        <div class="layui-form-item">
                            <div>
                                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label>下载图片</label>
                            <div>
                                <input type="radio" name="data[down_attachment]" value="1" title="是">
                                <input type="radio" name="data[down_attachment]" value="0" title="否" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label>图片水印</label>
                            <div>
                                <input type="radio" name="data[watermark]" value="1" title="是">
                                <input type="radio" name="data[watermark]" value="0" title="否" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div>
                                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
        </form>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="caijiTpl">
    {{# if (JSON.stringify(d.rules) == '[]' || d.rules == null) { }}
        <div class="layui-form-item rules-item">
            <button type="button" class="layui-btn rules-add" data-init="yes">添加规则</button>
        </div>
    {{# } else {  }}
        {{# layui.each(d.rules, function(index, item) { }}
        <div class="layui-form-item rules-item">
            <div class="layui-input-inline" style="width:90px;">
                <input type="text" class="layui-input" name="customize_config[title][]" placeholder="标题" value="{{item.title}}" />
            </div>
            <div class="layui-input-inline" style="width:90px;">
                <input type="text" class="layui-input" name="customize_config[name][]" placeholder="字段名" value="{{item.name}}"  />
            </div>
            <div class="layui-input-inline" style="width:200px;">
                <input type="text" class="layui-input" name="customize_config[selector][]" placeholder="选择器" value="{{item.selector}}"  />
            </div>
            <div class="layui-input-inline" style="width:60px;">
                <input type="text" class="layui-input" name="customize_config[attr][]" placeholder="属性" value="{{item.attr}}"  />
            </div>
            <div class="layui-input-inline" style="width:150px;">
                <input type="text" class="layui-input" name="customize_config[value][]" placeholder="固定值" value="{{item.value}}"  />
            </div>
            <div class="layui-input-inline" style="width:140px;">
                <input type="text" class="layui-input" name="customize_config[filter][]" placeholder="内容过滤器" value="{{item.filter}}"  />
            </div>
            <label class="layui-form-mid">
                {{# if (index == 0) { }}
                <span class="layui-badge rules-del">-</span>&nbsp;&nbsp;
                {{# } }}
                <span class="layui-badge layui-bg-blue rules-add">+</span>
            </label>
        </div>
        {{# }); }}
    {{# } }}
</script>
<script type="text/javascript">
layui.use(['laytpl', 'form','yznForm'], function() {
    var form = layui.form,
        laytpl = layui.laytpl,
        formData = [],
        yznForm = layui.yznForm;

        yznForm.listen();
        form.on('radio(urlType)', function(data) {
            if (2 == data.value) {
                $('.url_type').hide();
                $('.url_type2').show();
            }
            if (1 == data.value) {
                $('.url_type').show();
                $('.url_type2').hide();
            }
        });

        laytpl($('#caijiTpl').html()).render({ rules: formData || [] }, function(html) {
            $('#caijiBox').html(html);
            form.render();
        });

        // 添加规则
        $(document).on('click', '.rules-add', function() {
            var that = $(this);
            addRule(that);
        });

        // 删除规则
        $(document).on('click', '.rules-del', function() {
            var that = $(this),
                obj = that.parents('.rules-item'),
                len = obj.siblings('.rules-item').length;
            if (parseInt(len) <= 0) {
                addRule(that);
            }
            obj.remove();
        });

        addRule = function(that) {
            var data = {
                rules: [{ "title": "", "name": "", "selector": "", "attr": "","value": "", "filter": "" }]
            };
            laytpl($('#caijiTpl').html()).render(data, function(html) {
                that.parents('#caijiBox').append(html);
                form.render();
            });
            if (that.attr('data-init') == 'yes') {
                that.parents('.rules-item').remove();
            }
        };
});
</script>
{/block}